<template>
  <div class="home-mine">
    <!-- header -->
    <van-nav-bar title="我的" class="home-mine__nav" ref="header" />
    <!-- main -->
    <better-scroll class="home-mine__wrapper">
      <div class="home-mine__main">
        <div class="home-mine__header">
          <img :src="avatar" alt />
          <div>
            <span>{{ mobile }}</span>
            <span>{{ vipLevel === 1 ? '超级会员 到期时间: ' + currentAt : '普通会员' }}</span>
          </div>
        </div>
        <ul class="home-mine__tabs">
          <li v-for="(tab, index) in tabs" :key="index">
            <span>{{ tab.value }}</span>
            <span>{{ tab.label }}</span>
          </li>
        </ul>
        <van-cell-group class="home-mine__list">
          <van-cell
            v-for="(list, index) in cellList"
            :key="index"
            :icon="list.icon"
            :title="list.label"
            is-link
            @click="onOpenWin(list)"
          />
        </van-cell-group>

        <van-button type="default" block class="home-mine__btn" @click="onLogout">退出登录</van-button>
      </div>
    </better-scroll>
  </div>
</template>

<script>
export default {
  name: "HomeMine",
  props: {
    // 导航索引
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      avatar: require("./../../assets/img/langwo.png"),
      mobile: "18674835226",
      vipLevel: 1,
      currentAt: "2020/05/23",
      tabs: [
        { label: "推广奖金", value: "0元" },
        { label: "好友", value: "0个" },
        { label: "积分", value: "0分" }
      ],
      cellList: [
        { label: "会员充值", icon: "vip-card-o", url: "recharge" },
        { label: "激活码", icon: "notes-o", url: "card" },
        { label: "意见反馈", icon: "edit", url: "idea" },
        { label: "平台新增", icon: "edit", url: "platform" },
        { label: "系统设置", icon: "bulb-o", url: "system" },
        { label: "在线客服", icon: "phone-o", url: "service" }
      ]
    };
  },
  created() {
    if (this.$storage.get('activationCode')) {
      this.cellList.splice(1, 1);
    }
  },
   mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require('statusBar');
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret){
        _this.$refs.header.$el.style.height = (ret.statusHeight + 44) + 'px';
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + 'px';
      });
    });
  },
  methods: {
    // 登出
    onLogout() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认退出?",
          confirmButtonColor: "#e4393c",
          beforeClose: (action, done) => {
            done();
            if (action === "confirm") {
              // 退出登录
              window.api.openWin({
                name: "index",
                url: `./index.html`,
                bgColor: "#fff"
              });
            }
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    // 打开窗口
    onOpenWin(list) {
      if (list.url) {
        window.api.openWin({
          name: list.url,
          url: `./` + list.url + `.html`,
          bgColor: "#fff",
          pageParam: {
            active: this.active
          }
        });
      } else {
        this.$toast("敬请期待");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-mine {
  width: 100%;
  height: calc(100vh - 50px);
  @include flex($direction: column, $flexWrap: nowrap);
  .home-mine__wrapper {
    width: 100%;
    background: #efefef;
    flex: 1;
    overflow: hidden;
    .home-mine__main {
      .home-mine__header {
        width: 100%;
        height: 120px;
        padding: 0 15px;
        background: #e4393c;
        @include flex($justifyContent: flex-start, $flexWrap: nowrap);
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          margin-right: 10px;
        }
        & > div {
          @include flex(
            $direction: column,
            $flexWrap: nowrap,
            $align-items: flex-start
          );
          span {
            color: #fff;
            font-size: 12px;
            &:first-child {
              font-size: 16px;
              margin-bottom: 15px;
            }
          }
        }
      }
      .home-mine__tabs {
        width: 100%;
        @include flex();
        background: #fff;
        li {
          flex: 1;
          height: 80px;
          @include flex($direction: column, $justifyContent: center);
          border-right: 1px solid #ebedf0;
          border-bottom: 1px solid #ebedf0;
          &:nth-child(2) {
            span {
              &:first-child {
                color: #07c160;
              }
            }
          }
          &:last-child {
            border-right: none;
            span {
              &:first-child {
                color: #1989fa;
              }
            }
          }
          span {
            font-size: 12px;
            &:first-child {
              font-size: 20px;
              margin-bottom: 6px;
              color: #e4393c;
            }
          }
        }
      }
      .home-mine__btn {
        margin-top: 20px;
        .van-button__text {
          color: #e4393c;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.home-mine {
  .van-hairline--bottom::after {
    border: none;
  }
}
</style>